<template>
  <div class="bg">
    <header>
      <h1>后台管理页登录</h1>
    </header>
    <div class="wrapper">
      <div class="card">
        <div class="login">
          <header>
            <h2>登录</h2>
          </header>
          <n-form ref="formRef" :model="model" :rules="rules">
            <n-form-item path="username" label="用户名">
              <n-input
                placeholder="请输入您的用户名"
                v-model:value="model.username"
                @keydown.enter.prevent="submit"
              ></n-input>
            </n-form-item>
            <n-form-item path="password" label="密码">
              <n-input
                placeholder="请输入您的密码"
                v-model:value="model.password"
                type="password"
                @keydown.enter.prevent="submit"
              ></n-input>
            </n-form-item>
            <n-button @click="submit" size="large" block round type="primary"
              >登录</n-button
            >
          </n-form>
        </div>
        <figure>
          <img src="../../assets/bg.png" alt="" />
        </figure>
      </div>
    </div>
    <footer>&copy;2022 All rights reserved | Design by zoneaurora</footer>
  </div>
</template>

<script lang="ts" setup>
import {
  FormRules,
  NForm,
  NFormItem,
  NInput,
  NButton,
  FormInst,
  useMessage,
} from "naive-ui";
import { ref } from "vue";
import { useRouter } from "vue-router";

import { LoginModel } from "@/types";
import { Login } from "@/api/Login";

const router = useRouter();

const message = useMessage();

// 表单对象，用于验证
const formRef = ref<FormInst | null>(null);

// 表单数据模型
const model = ref<LoginModel>({
  username: null,
  password: null,
});

// 验证规则
const rules: FormRules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
};

function submit() {
  formRef.value?.validate(async (err) => {
    if (!err) {
      try {
        const res = await Login(model.value);
        localStorage.setItem("token", res.data.token);
        message.success(res.msg);
        router.push("/");
      } catch (e: any) {
        message.error(e.response.data.msg);
      }
    }
  });
}
</script>

<style lang="less" scoped>
.bg {
  height: 100vh;
  background-color: #0081cf;
  overflow: auto;
}

header,
footer {
  text-align: center;
  margin: 2em;
  color: white;
}

header {
  h1 {
    margin: 2em;
  }
}
.wrapper {
  max-width: 60em;
  margin: 0 auto;

  .card {
    margin: 2em 1em;
    background-color: white;
    border-radius: 1em;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));

    .login {
      padding: 4em 2em 5em;

      header,
      h2 {
        margin: 0;
        text-align: center;
        color: black;
      }
    }

    figure {
      margin: 0;
      background-color: #eee;
      padding: 1em;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}
</style>
